Editing Template Button Styles
Web template button fonts & colors
Style code for button colors and fonts in Allwebco templates is controlled by the .css files. The global css file may be named "style.css", "coolstyle.css" or "corporatestyle.css". In color theme templates the css files will be in your "colors" folder. You can edit css files in Notepad, TextEdit or a plain text editor.
Button css code
You can edit the font color, background, border and sizes for any button. Search in the css file(s) for something like "contact", "order" or "slideshow" to locate the code. Code will be similar to the following example.
input[type=submit].submitbutton, input[type=reset].submitbutton
{
color: #FFFFFF;
font: bold 12px arial, sans-serif;
text-align: center;
background-color: #004C76;
-webkit-appearance: none;
padding: 7px 8px 7px 8px;
margin: 0px 0px 0px 0px;
cursor: pointer;
width: 120px;
border: #004C76 1px solid;
/* CORNER ROUNDING */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
input[type=submit].submitbutton:hover, input[type=reset].submitbutton:hover
{
color: #FFFFFF;
background-color: #5E7287;
border: #5E7287 1px solid;
}
The second group of code is for the hover colors.
Gallery and slideshow buttons
Below is an example of the gallery button code from a Garden template CSS file. Note that the "color" below will be the font color. The background color is highlighted below.
.button-gallery {
color: #000000;
font: bold 11px arial, serif;
text-align: center;
background-color: #FFFFFF;
background-image: url("picts/button-gallery.gif");
padding: 1px 5px 1px 5px;
margin: 0px 1px 0px 1px;
display: block;
cursor:pointer;
border: #999999 1px solid;
}
.buttonon-gallery {
color: #0066FF;
font: bold 11px arial, serif;
text-align: center;
background-color: #FFFFFF;
background-image: url("picts/buttonon-gallery.gif");
padding: 1px 5px 1px 5px;
margin: 0px 1px 0px 1px;
display: block;
cursor:pointer;
border: #0066FF 1px solid;
}
Colors you can use
To change colors, use a different 6 digit HEX number ( see HEX color chart ).
Button images
Most newer templates use a "button.png" for gradient shading. This is a semi-transparent image and you should not need to edit this file to change the button colors.
Other button images
You may need to edit some images in your template picts folder to change the button colors. These may be named "button.gif" and "buttonon.gif", "button-slideshow.gif", "button-gallery.gif", "button-order.gif" or some other similar name. These .gif images are 256 indexed color images. You may need to convert them to RGB in your graphics software before you change these colors. Also see shifting colors on the right menu on this page.